import Taro, { Component, redirectTo } from '@tarojs/taro'
import { View, Text, Image,Swiper, SwiperItem,  } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import { add, minus, asyncAdd, ooo} from '../../actions/counter'
import { imgUrl } from '../../config'

import './index.scss'

@connect(({ counter }) => ({
  counter
}), (dispatch) => ({
  add () {
    dispatch(add())
  },
  dec () {
    dispatch(minus())
  },
  asyncAdd () {
    dispatch(asyncAdd())
  },
  haha () {
    dispatch(ooo(0))
  },
  // re(){
  //   dispatch(re())
  // }
}))


class Index extends Component {

  // config = {
  //   navigationBarTitleText: '首页'
  // }
  constructor (props) {
    super(props)
    this.state = { 

     }
  }

  componentWillMount(){
  }
  componentDidMount(){

  }
  addWd(){
    redirectTo({
      url: '/pages/demo/demo'
    })
  }
  photo(){
    redirectTo({
      url: '/pages/photo/photo'
    })
  }
  goSearch(){
    redirectTo({
      url: '/pages/searchQz/searchQz'
    })
  }
  goMoreQz(){
    redirectTo({
      url: '/pages/moreQz/moreQz'
    })
  }
  goMoreHt(){
    redirectTo({
      url: '/pages/moreHt/moreHt'
    })
  }
 
  goQzXq(){
    redirectTo({
      url: '/pages/qzXq/qzXq'
    })
  }
  cont(){
    redirectTo({
      url: '/pages/tzDetail/tzDetail'
    })
  }
  goHtXq(){
    redirectTo({
      url:'/pages/htXq/htXq'
    })
  }
  render () {
    console.log(this.props)
    return (
      // <ScrollView
      // className='scrollview'
      // scrollY
      // scrollWithAnimation
      // scrollTop='0'
      // style='height:100%'
      // lowerThreshold='10'
      // upperThreshold='20'
      // onScrolltoupper={this.onScrolltoupper}
      // // onScrollToLower={this.props.re}
      // onScroll={this.onScroll}>
            <View className='index'>
              <View className='head'>
              <View className='active gc' onClick={this.add}>广场</View>
                  <View className='wd' onClick={this.addWd}>问答</View>
                  <Image src={`${imgUrl}/serch.png`}  onClick={this.goSearch} />
              </View>
              <View className='topCont'> 
                    <Swiper
                      className='top'
                      indicatorColor='#999'
                      indicatorActiveColor='#333'
                      // circular
                      displayMultipleItems='5' >
                        <SwiperItem>
                          <Image src={`${imgUrl}/1.png`} onClick={this.goQzXq} />
                        </SwiperItem>
                        <SwiperItem>
                          <Image src={`${imgUrl}/2.png`} onClick={this.goQzXq} />
                        </SwiperItem>
                        <SwiperItem>
                          <Image src={`${imgUrl}/3.png`} onClick={this.goQzXq} />
                        </SwiperItem>
                        <SwiperItem>
                          <Image src={`${imgUrl}/4.png`} onClick={this.goQzXq} />
                        </SwiperItem>
                        <SwiperItem>
                          <Image src={`${imgUrl}/1.png`} onClick={this.goQzXq} />
                        </SwiperItem>
                        <SwiperItem>
                          <Image src={`${imgUrl}/2.png`} onClick={this.goQzXq} />
                        </SwiperItem>
                        <SwiperItem>
                          <Image src={`${imgUrl}/3.png`} onClick={this.goQzXq} />
                        </SwiperItem>
                        <SwiperItem>
                          <Image src={`${imgUrl}/5.png`}  onClick={this.goMoreQz} />
                        </SwiperItem>
                </Swiper>
              </View>
       
              <Swiper
                className='ban'
                indicatorColor='#999'
                indicatorActiveColor='#333'
                // circular
                displayMultipleItems='3.5' >
              <SwiperItem>
                <View className='swiperCont' onClick={this.goHtXq}>#欧尚cos1°</View>
              </SwiperItem>
              <SwiperItem>
                <View className='swiperCont' onClick={this.goHtXq}>#国庆节去哪</View>
              </SwiperItem>
              <SwiperItem>
                <View className='swiperCont' onClick={this.goHtXq}>#欧尚新车</View>
              </SwiperItem>
              <SwiperItem>
                <View className='swiperCont' onClick={this.goHtXq}>#慢速公路</View>
              </SwiperItem>
              <SwiperItem>
                <View className='swiperCont' onClick={this.goHtXq}>#欧尚新车</View>
              </SwiperItem>
              <SwiperItem>
                <View className='swiperCont' onClick={this.goHtXq}>#欧尚cos1°</View>
              </SwiperItem>
              <SwiperItem>
                <View className='swiperCont' onClick={this.goHtXq}>#国庆节去哪</View>
              </SwiperItem>
              <SwiperItem>
                <View className='swiperCont' onClick={this.goMoreHt} >更多</View>
              </SwiperItem>
            </Swiper>
            <View className='contAll'>
              {/* <View className='cont'>
                <Image src={`${imgUrl}/pic.png`} className='pic1' />
                <View className='text'>
                  <Text className='text1'>#欧尚cos1°</Text>
                  <Text className='text2'>欧尚汽车免费试驾邀您参与</Text>
                  <View className='tou'>
                    <Image src={`${imgUrl}/tou.png`} className='touPic' />
                    <Text className='name'>熊猫吃锤子</Text>
                    <Image src={`${imgUrl}/zan.png`} className='zan' />
                    <Text className='shu'>999</Text>
                  </View>
                </View>
              </View> */}
            {this.props.counter.list.map((item,index) =>
              <View className='cont' key={index} onClick={this.cont}>
              <Image src={item.pic} className='pic1' />
              <Image src={item.jh ? item.jh : ''} className='jh' />
              <View className='text'>
                <Text className='text1'>{item.tit1}</Text>
                <Text className='text2'>{item.tit2}</Text>
                <View className='tou'>
                  <Image src={item.tou} className='touPic' />
                  <Text className='name'>{item.name}</Text>
                  <Image src={item.zan} className='zan' />
                  <Text className='shu'>{item.shu}</Text>
                </View>
              </View>
            </View>         
            )}
            </View>
            <Image src={`${imgUrl}/fbht.png`} onClick={this.photo} className='fbht'/>
            </View>
      // </ScrollView>

    )
  }
}

export default Index
